<template>
	<div class="icons">
		<swiper :options="swiperOption" v-if='showIcon'>
	    <!-- slides -->
	    <swiper-slide v-for='(page,index) of pages' :key='index'>
			<div class="icon" v-for='item of page' :key=item.id>
				<img :src="item.imgSrc" alt="">
				<p>{{item.text}}</p>
			</div>
	    </swiper-slide>
	    <div class="swiper-pagination"  slot="pagination"></div>
	    <!-- Optional controls -->
	  </swiper>
	
	</div>
</template>
<script>
	export default{
		name:'HomeIcons',
		props:{
			list:{
				type:Array,
				required:true
			}
		},
		data(){
			return{
				swiperOption:{
					autoplay:false,
					pagination:'.swiper-pagination',
					loop:true
				}
			}
		},
		computed:{
			pages(){
				const pages = [];
				this.list.forEach((item,index)=>{
					const page = Math.floor(index/8)
					if(!pages[page]){
						pages[page] = []
					}
					pages[page].push(item)
				})
				return pages
			},
			showIcon(){
				return this.list.length
			}
		}
	}
</script>
<style lang="stylus" scoped>
@import '~@/assets/styles/global.styl'
	.icons >>> .swiper-container {
		height: 0;
		padding-bottom: 50.66%
	}
	.icons{
		overflow: hidden;
		height: 0;
		width: 100%;
		padding-bottom: 50.66%;
		background-color: #fff
	}
	.icon{
		float: left;
		width: 25%;
		height: 0;
		padding-bottom: 22%
		font-size: .28rem;
		text-align: center;
		padding-top: .1rem;
	}
	.icon img{
		display: block;
		margin: 0 auto;
		width: 1.1rem;
		height: 1.1rem;
	}
	.icon p{
		ellipsis()
	}
</style>